<template>
    <div class="mock-box">
        <div v-for="index in 40" class="point" :style="index <= count ? `background: ${props.color}` : ''" :key="index"
            :data-id="index"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
const props = defineProps<{
    color: string,
    data_source: number
}>();
const count = ref(1);

watch(() => props.data_source, (newVal) => {
    // count.value = Math.floor(newVal / 10)
    const target = Math.floor(newVal / 10);
    const interval = setInterval(() => {
        if (count.value < target) {
            count.value++;
        } else {
            clearInterval(interval);
        }
    }, 150); // Adjust this value to control the speed of the animation
}, {
    immediate: true,
    deep: true
});



</script>

<style lang="scss" scoped>
.mock-box {
    width: 100%;
    height: 100%;
    border: 0px solid #D9D9D9;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    box-sizing: border-box;

    .point {
        width: 2%;
        height: 100%;
        background-color: #D9D9D9;
        transition: all .5s linear;
    }
}
</style>